
<template>
  <el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="代码查看" class="dialog-container" width="750px" append-to-body @opened="dialogOpened">
    <div id="jsoneditor" style="height: 400px;width: 100%;">{{ reportDef }}</div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="modifyCode">修改代码</el-button>
      <el-button @click="currentDialogVisible = false">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { loadJs } from "../util/index.js";

export default {
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isLoading: false,
      datasource: null,
      formData: {
        fileName: null,
        prefix: null
      },
      sourceList: ["oracle.jdbc.OracleDriver", "com.ibm.db2.jcc.DB2Driver", "com.microsoft.sqlserver.jdbc.SQLServerDriver", "com.mysql.jdbc.Driver"],
      providers: [], // 存储类型
      reportFilesData: {}, // 报表文件数据
      reportFiles: [], // 报表文件列表
      reportDef: {} // 代码数据
    };
  },
  computed: {
    // 显示窗口
    currentDialogVisible: {
      get: function () {
        return this.visible;
      },
      set: function (val) {
        this.$emit("update:visible", val);
      }
    }
  },
  mounted () {
    loadJs(
      "https://auod-beijing.oss-cn-beijing.aliyuncs.com/ace/src-min-noconflict/ace.js"
    );
  },
  methods: {
    // 打开时加载文件列表
    dialogOpened () {
      this.generateJson();
    },
    // 修改代码
    modifyCode () {
      const { context, reportTable } = this.designer;
      this.reportDef = context.reportDef;

      try {
        // eslint-disable-next-line
        const editor = ace.edit("jsoneditor");
        const jsonData = editor.getSelectedText();
        if (!jsonData) {
          this.$message.error("请选择代码后修改");
          return;
        }
        context.reportDef = JSON.parse(jsonData);
        reportTable.buildReportData(context.reportDef);
        const hot = context.hot;
        hot.render();

        this.currentDialogVisible = false;
        this.$message.success("修改成功");
      } catch (error) {
        this.$message.error("修改失败：" + error.message);
      }
    },
    // 生成JSON
    generateJson () {
      debugger;
      const { context } = this.designer;
      this.reportDef = context.reportDef;

      this.$nextTick(() => {
        // eslint-disable-next-line
        const editor = ace.edit("jsoneditor");
        editor.session.setMode("ace/mode/jsx");
        editor.setValue(JSON.stringify(this.reportDef, null, 2));
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container {
  padding: 0;
  .tip-item {
    line-height: 28px;
    color: darkgrey;
  }
}
</style>
